<template>
  <li :class="{ completed: todo.completed }">
    <span>{{ index + 1 }}. {{ todo.text }}</span>
    <div class="button-container">
      <button @click="emit('toggle-completion')">完成</button>
      <button @click="emit('delete-todo')">删除</button>
    </div>
  </li>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const props = defineProps<{
  todo: Todo;
  index: number;
}>();


const emit = defineEmits(['toggle-completion', 'delete-todo']);
</script>

<style scoped>
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

li:last-child {
  border-bottom: none;
}

li.completed {
  text-decoration: line-through;
  color: #888;
}

.button-container {
  display: flex;
  gap: 5px;
}

button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background-color: #dc3545;
  color: white;
  cursor: pointer;
}

button:first-of-type {
  background-color: #007bff;
}

button:hover {
  background-color: #c82333;
}

button:first-of-type:hover {
  background-color: #0069d9;
}

button:active {
  background-color: #bd2130;
}

button:first-of-type:active {
  background-color: #0062cc;
}
</style>
